<template>
	<view class="content">
		<view class="item">
			<view class="top">
				<text>个人佣金达到</text>
				<text class="price">10万U</text>
				<image class="car1" src="../../static/icon/car3.png" mode=""></image>
			</view>
			<view class="btm">
				豪圣奖励10万人民币的轿车一辆(车自选)
			</view>
			<u-line-progress 
			:striped='true' 
			inactive-color="#000000"  
			:percent="one"></u-line-progress>
		</view>
		<view class="item item_two">
			<view class="top">
				<text>个人佣金达到</text>
				<text class="price" style="color: #FEEE56;">50万U</text>
				<image class="car1" src="../../static/icon/car2.png" mode=""></image>
			</view>
			<view class="btm">
				豪圣<text style="color: #FEEE56;">奖励50万人民币的轿车一辆</text>(车自选)
			</view>
			<u-line-progress 
			:striped='true' 
			inactive-color="#000000"  
			:percent="two"></u-line-progress>
		</view>
		<view class="item item_three">
			<view class="top">
				<text>个人佣金达到</text>
				<text class="price" style="color: #FFB400;">100万U</text>
				<image class="car1" src="../../static/icon/car1.png" mode=""></image>
			</view>
			<view class="btm">
				豪圣<text style="color:#FFB400;">奖励100万人民币的轿车一辆</text>(车自选)
			</view>
			<u-line-progress 
			:striped='true' 
			inactive-color="#000000"  
			:percent="three"></u-line-progress>
		</view>
		<view class="bg"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				one:0,
				two:0,
				three:0
			}
		},
		onReady() {
			
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh(){
			this.getData()
		},
		methods: {
			//合约进度
			getData(){
				this.$http({
					url:this.$api.user_heyuejindu,
					method:'POST',
					success:res=>{
						this.one = res.data.swbili || 0
						this.two = res.data.wswbili || 0
						this.three = res.data.bswbili || 0
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.content{
		min-height: 100vh;
		background: url(../../static/hybg.png)center/cover no-repeat;
		padding-top: 50rpx;
		.item{
			width: 701rpx;
			height: 223rpx;
			background:url(../../static/heyue.png) left center no-repeat;
			background-size: 701rpx 223rpx;
			margin: 50rpx auto 50rpx auto;
			padding: 30rpx 42rpx 32rpx 42rpx;
			color: #FFFFFF;
			font-size: 12px;
			.top{
				display: flex;
				align-items: center;
				margin-bottom: 18rpx;
				.price{
					font-size: 18px;
					color: #00EFFE;
					margin-right: 46rpx;
				}
				.car1{
					width: 92rpx;
					height: 50rpx;
					
				}
			}
			.btm{
				margin-bottom: 24rpx;
			}
			::v-deep .u-striped{
				background: linear-gradient(90deg, #5A65F2 0%, #2B0D5E 100%);
			}
			.number{
				position: absolute;
				right: 0;
				top:40rpx
			}
		}
		.item_two{
			::v-deep .u-striped{		
				background: linear-gradient(90deg, #58C8EC 0%, #025365 100%);
			}
		}
		.item_three{
			::v-deep .u-striped{
				background: linear-gradient(90deg, #FCA641 0%, #C97410 100%);
			}
		}
		/* .bg{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 396rpx;
			background: url(../../static/heyujindu.png)left bottom no-repeat;
			background-size: 100% 396rpx;
		} */
	}
</style>